<script setup lang="ts">

</script>

<template>
  <div id="header1">这是网页的头部，我想控制它显示/隐藏</div>
<div class="mydiv">
    <router-link to="/xc/index2?a=1&b=3">跳转index2页面</router-link>
  <div>{{str}}</div>
  <div @click="app_method1">给flutter传递数据1</div>
  <div @click="app_method2">给flutter传递数据2</div>
  <div @click="app_method3">自定义对象</div>
  <div @click="app_method4">自定义对象</div>
  <div @click="getFlutterUserInfo">获取用户数据</div>
  <div @click="wxpay" style="height: 50px;background-color: #876315;">微信支付</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const str = ref('aaaa')

function getFlutterUserInfo(){
  try {
    alert(window.xcapp)
    window.xcapp.callHandler("getUserInfo").then(function(data) {
      console.log("拿到的数据:", data);
      alert("aaaaaaa="+JSON.stringify(data))
    });

  } catch (e) {
    console.error("调用失败:", e);
  }
}

function wxpay() {
  // alert(window.xcapp)
  let paymentUrl = 'weixin://wap/pay?prepayid=wx14171056102382687824c899a6bd5b0001&package=319096468&noncestr=1760433056&sign=92095ab29bd2727ab2a11f90f31bbce4';
  window.xcapp.callHandler("wxpay",paymentUrl)
}
//////////////////////
// 调用Flutter方法
function app_method1() {
  window.flutter_inappwebview.callHandler('app_method1', 'Hello from Vue!');
}
function app_method2() {
  window.flutter_inappwebview.callHandler('app_method2', '你好啊');
}
function app_method3() {
  alert(window.myBridge)
  window.myBridge.callHandler('app_method2', '你好啊');
}
function app_method4() {
  alert(window.myBridge2)
  window.myBridg2.callHandler('app_method2', '你好啊');
}



// 接收Flutter消息
window.showMessage = function(msg) {
  alert('JS 收到消息: ' + msg);
};
window.getGreeting =function getGreeting() {
  return "Hello from JavaScript!";
}
</script>
<style scoped lang="less">
/* 确保 <body> 和 <html> 高度占满全屏 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 让父容器使用 Flex 布局，并居中子元素 */
body {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  background-color: #f0f0f0; /* 可选：背景色便于观察 */
}

/* 你的 div 样式 */
.mydiv {
  background-color: #007bff;
  color: white;
  padding: 20px 40px;
  border-radius: 8px;
  font-size: 18px;
  text-align: center;
}
</style>